<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=0.5,minimum-scale=0.5,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css" />
    <style>
        body {
            background-color: #F4F4F4;
            padding-bottom:128px;
        }

        .card {
            position: relative;
            height: 290px;
            background: -webkit-linear-gradient(right, #F04040, #FF7A7A);
        }

        .top {
            padding-top: 10px;
            width: 100%;
            position: relative;
        }

        .right_arrow {
            height: 48px;
            width: 96px;
            background: url(__IMG__/left1.png) no-repeat center center;
            background-size: 20px 33px;
            position: absolute;
            top: 10px;
        }

        .title {
            font-size: 34px;
            color: #FFFFFF;
            text-align: center;
            width: 100%;
        }

        .order {
            position: absolute;
            top: 236px;
            width: 100%;
            height: auto;
            border-radius: 0.55rem;
        }

        .order_list {
            width: 92%;
            margin: 0 auto;
            border-radius: 22px;
            background-color: #FFFFFF;
            margin-bottom: 130px;
        }

        .order_title {
            color: #404040;
            font-size: 30px;
            padding-right: 18px;
            font-weight: bold;
            height: 102px;
            line-height: 102px;
            padding-left:35px;
            padding-right:20px;
        }

        .arrow {
            width: 12px;
            height: 102px;
            background: url(__IMG__/right_arrow.png) no-repeat center center;
            background-size: 12px 22px;
            margin-left: 20px;
        }

        .wait {
            font-size: 26px;
            color: #555555;
        }

        .phone {
            width: 21px;
            height: 21px;
            margin-top: 42px;
            margin-right: 11px;
        }

        .goods {
            margin-top: 32px;
            font-size: 26px;
            color: #404040;
        }

        .goods_pic {
            width: 108px;
            height: 108px;
            margin-right: 30px;
        }

        .goods_pic img {
            width: 100%;
            height: 100%;
        }

        .price {
            padding-top: 36px;
        }

        .total_num {
            height: 39px;
            line-height: 39px;
            background-color: #F8F8F6;
            text-align: center;
            font-size: 26px;
            color: #B7B7B7;
            margin-top: 43px;
        }

        .down {
            width: 21px;
            height: 39px;
            background: url(__IMG__/down.png) no-repeat center center;
            background-size: 21px 13px;
            margin-left: 11px;
        }

        .price_intro {
            padding-top: 6px;
            padding-bottom: 4px;
        }

        .single {
            padding-bottom: 20px;
            font-size: 28px;
            color: #555555;
        }

        .price {
            font-size: 28px;
            color: #555555;
        }

        .discount {
            color: #F04040;
        }

        .price1 {
            font-size: 26px;
            color: #B7B7B7;
            padding-right: 8px;
        }

        .price2 {
            font-size: 28px;
            color: #404040;
        }

        .price3 {
            font-size: 42px;
            color: #F04040;
        }

        .price4 {
            font-size: 20px;
            color: #F04040;
        }

        .price_all {
            padding-top: 43px;
            padding-bottom: 33px;
        }
        .xinxi{
          padding-left:71px;
          padding-right:32px;
          padding-top:30px;
        }
        .local{
          width: 31px;
          height: 38px;
          margin-right:29px;
        }
        .intro{
          font-size: 28px;
          color: #fff;
        }
        .arrow1 {
            width: 15px;
            height: 26px;
            background: url(__IMG__/right_arrow.png) no-repeat center center;
            background-size: 15px 26px;
            margin-top: 30px;
        }
        .phone1{
          padding-left:36px;
        }
        .outter{
          margin-left:20px;
          margin-right: 20px;
        }
        .peisong{
          height: 114px;
          line-height:114px;
          font-size: 30px;
          color: #404040;
          padding-left: 5px;
        }
        .time{
          font-size: 26px;
          color: #2E97FF;
          text-align: right;
        }
        .arrow2 {
            width: 15px;
            height: 114px;
            background: url(__IMG__/right_arrow.png) no-repeat center center;
            background-size: 15px 26px;
            margin-left: 14px;
        }
        .tishi{
          font-size: 28px;
          color: #FB5F22;
        }
        .tishi img{
          width: 33px;
          height: 33px;
          margin-top:3px;
          margin-left:14px;
          margin-right:15px;
        }
        .btn{
          width:100%;
          height:128px;
          position: fixed;
          bottom:0;
          left:0;
          background-color: #F4F4F4;
        }
        .toPay{
          width:92%;
          height:94px;
          line-height: 94px;
          font-size:32px;
          color:#fff;
          background:linear-gradient(-127deg,rgba(240,64,64,1),rgba(255,122,122,1));
          text-align:center;
          margin:17px auto;
          border-radius:8px;
        }
        .ovfHiden{overflow: hidden;height: 100%;}
    </style>
</head>

<body>


<div id="list"></div>
    <div class="card">
        <div class="top flex-wrap">
            <div class="right_arrow" tapmode="active" onclick="window.history.back(-1);"></div>
            <div class="title">订单详细</div>
        </div>
        <div class="xinxi flex-wrap" onclick="choose({$shop.s_id})">
          <div class="local"><img src="__IMG__/local.png" /></div>
          <div class="flex-con intro">
            <div class="aui-ellipsis-1" id='name111'>{$address.address}</div>
            <div><span id='name222'>{$address.username}</span><span class="phone1" id='name333'>{$address.phone}</span></div>
          </div>
          <div class="arrow1"></div>
        </div>
        <div class="order" id="card">
          <div class="order_list">
              <div class="order_title flex-wrap underLine">
                  <div>{$shop.s_pinlei ?? ''}</div>
                  <div class="arrow"></div>
                  <div class="flex-con"></div>
                  <a class="phone" href="tel:{$shop.s_phone}"><img src="__IMG__/call.png" /></a>
                  <a class="wait" href="tel:{$shop.s_phone}">联系商家</a>
              </div>
              <div class="peisong flex-wrap outter underLine">
                <div>商家配送</div>
                <div class="time flex-con">立即配送{$shop.s_open}-{$shop.s_close}</div>
                <div class="arrow2"></div>
              </div>

              {volist name='goods' id='g'}
              <div class="goods flex-wrap outter">
                  <div class="goods_pic">


                      <img src="{$g.g_thumb ?? '__IMG__/zhanweitu/a3.png'}">

                  </div>
                  <div class="flex-con">
                      <div>{$g.g_name ?? ''}</div>
                      <div class="flex-wrap price">
                          {if $g.g_prcie_kill > 0}
                          <div class="flex-con">￥{$g.g_prcie_kill ?? ''}x{$g.car_number ?? ''}</div>
                          <div>￥{$g.g_prcie_kill*$g.car_number}</div>
                          {else /}
                          <div class="flex-con">￥{$g.g_price_now ?? ''}x{$g.car_number ?? ''}</div>
                          <div>￥{$g.g_price_now*$g.car_number}</div>
                          {/if}
                      </div>
                  </div>
              </div>
              {/volist}

              <div class="total_num flex-wrap outter">
                  <div class="flex-con"></div>共{$length}件<!--<div class="down"></div>-->
                  <div class="flex-con"></div>
              </div>

              <div class="price_intro outter">
                  <div class="single flex-wrap">
                      <div>商品金额</div>
                      <div class="flex-con"></div>
                      <div>￥{$data.allmoney}</div>
                  </div>
                  <div class="single flex-wrap">
                      <div>配送费</div>
                      <div class="flex-con">
                        <div class="tishi flex-wrap">
                  		  {if $data.post != 0}
                          <img src="__IMG__/tishi.png"/>未达到起送金额
                          {/if}
                        </div>
                      </div>
                      <div>￥{$data.post ?? '0'}</div>
                  </div>
                  <div class="single flex-wrap">
                      <div>优惠</div>
                      <div class="flex-con"></div>
                      <div class="discount">-￥{$data.manjianMoney}</div>
                  </div>
                  <div class="single flex-wrap">
                      <div>包装费</div>
                      <div class="flex-con"></div>
                      <div class="discount">￥{$data.packfei}</div>
                  </div>                  
                  <div class="single flex-wrap">
                      <div>实际付款</div>
                      <div class="flex-con"></div>
                      <div class="discount">￥{$data.pay}</div>
                  </div>
                  <div class="single flex-wrap">
                      <div style="width: 200px;padding-top: 8px;">订单备注：</div>
                      <input type="text" placeholder="订单备注" id='addRemarkssss' style="background-color: #fff;font-size: 26px;">
                  </div>
              </div>
          </div>
        </div>
    </div>
    <div class="btn">
        <div class="toPay" shopid="{$shop.s_id}" onclick="toMakeOrder(this)">提交订单</div>
    </div>
<input type="hidden" id="qisongMoney" value="{$shop.s_free}" />
<input type="hidden" id="payMoney" value="{$data.pay}" />
<input type="hidden" id="aid" value="{$address.aid}" />
<input type="hidden" id="lat" value="{$shop.s_lat}" />
<input type="hidden" id="lon" value="{$shop.s_lon}" />
<input type="hidden" id="uid" value="{$user_id}" />
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;background-color: black"></div>

</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>
<script type="text/javascript">
    //形成订单
    function toMakeOrder(el){
        var qisongMoney = $('#qisongMoney').val();//默认起送 金额
        var payMoney = $('#payMoney').val();//实际付款金额
        var add_id=$('#aid').val();//选择的收货地址的id
        var remark=$('#addRemarkssss').val().trim();

        if (Number(qisongMoney) > Number(payMoney)) {
            layer.open({
                content: "<span style='font-size: 28px;'>未到起送价格</span>"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return
        } else if (add_id <= 0) {
            layer.open({
                content: "<span style='font-size: 28px;'>请选择地址</span>"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return
        }
        var parame = {
            shopid: $(el).attr('shopid'),
            add_id: add_id,
            remark: remark,
            payMoney: payMoney,
            user_id:$('#uid').val()
        };
        $.ajax({
            url:'{:url("Car/makeOrder")}',
            data: parame,//
            type:'POST',
            dataType:'HTML',
            success: function(returndata){
                if(returndata == 1 || returndata == 2){
                    layer.open({
                        content: '订单生成失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else if(returndata == 5){
                    layer.open({
                        content: '库存不足'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else if(returndata == 4){
                    layer.open({
                        content: '此店铺今天不营业'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else if(returndata == 100){
                    layer.open({
                        content: '有商品超出限购'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    $('html,body').addClass('ovfHiden');
                    $('.all_div').css('display','block');
                    $('.all_div').html(returndata);
                }
            },
            error:function () {
                alert('Ajax error!');
            }
        })

    }

    //选择收货地址
    function choose(sid) {
        var lat = $('#lat').val();
        var lon = $('#lon').val();
        location.href = '{:url("home/Car/getNearAddress")}?lat='+lat+'&lon='+lon+'&shopid='+sid;
	}
    pushHistory();
    window.addEventListener("popstate", function(e) {
        location.href = '{:url("home/Car/index")}';
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
    XBack.listen(function(){
        alert('back');
    });
</script>

</html>
